<template>
  <views class="account_pay_manage">


    <!-- 新增充值账户 模态框 -->
    <modelBox :show="add_show" >
      <div class="add_lists">
        <div class="flex flexR add_lists_title">
                  <viewTitle :title="'添加充值账号'" :border="false"></viewTitle>
                  <div class="el-icon-close cp" @click="close_Model"></div>
        </div> 

        <div class="add_input_lists">
          <div class="flex flexR center add_inputs">
            <div class="add_input_lists_title">开户名称</div>
            <div class="add_input_lists_item">
                  {{form.bank_account_name}}
            </div>
          </div>
        </div>
        <div class="add_input_lists">
          <div class="flex flexR center add_inputs">
            <div class="add_input_lists_title">开户银行</div>
            <div class="add_input_lists_item">
              <el-input placeholder="请输入开户银行" v-model="form.bank_name" clearable></el-input>
            </div>
          </div>
        </div>
        <div class="add_input_lists">
          <div class="flex flexR center add_inputs">
            <div class="add_input_lists_title">银行卡号</div>
            <div class="add_input_lists_item">
              <el-input placeholder="请输入银行卡号" v-model="form.bank_sn" clearable></el-input>
            </div>
          </div>
        </div>        
        <!-- 确认 取消 -->
        <div class="Confirm_cancel flex flexR center">
          <el-button type="primary" @click="addCommit">确定</el-button>
          <el-button type @click="close_Model">取消</el-button>
        </div>
      </div>
    </modelBox>

    <div class="guidance">
      <viewTitle :title="'充值指引'" :border="true"></viewTitle>

      <!-- 邀请码 -->
      <div class="Invitation_code_list flex flexR">
        <div class="flow_path flex flexC">
          <div>1.企业充值账户是企业用于给服务商充值转账时的资金账户</div>
          <div>2.企业最多可以添加10个企业充值账户（开户名称必须与企业名称一致）;</div>
          <div>3.企业使用已添加的账户对服务商进行充值转账时，平台自动同步充值转账信息并入帐至企业账户。</div>
          <div class="notice">注：若使用企业充值账户列表中没有的账户进行充值转账。平台可能无法同步充值信息并入帐企业账户。请使用账户列表中的账户进行充值转账。</div>
        </div>
      </div>
    </div>

    <div class="provider_information">
      <div class="provider_information_title flex flexR">
        <div class="flex flexR center">
          <viewTitle :title="'服务商信息'" :border="true"></viewTitle>
          <div class="add_title">最多添加10个账户</div>
        </div>

        <div class="add_recharge_account" @click="add_account">+新增充值账户</div>
      </div>

      <div class="provider_information_table">
        <el-table
          border
          :data="tableData"
          style="width: 100%;max-width:none;"
          :header-cell-style="getRowClass"
          :select-on-indeterminate="true"
          :fit="true"
          :lazy="true"
          @row-click="clickRow"
          max-height="450"
        >
          <el-table-column fixed type="index" label="序号" width="100"></el-table-column>
          <el-table-column fixed prop="bank_account_name" label="开户名称" width="auto"></el-table-column>
          <el-table-column prop="bank_name" label="开户银行" width="auto"></el-table-column>
          <el-table-column prop="bank_sn" label="银行账号" width="auto"></el-table-column>
          <el-table-column label="操作" fixed="right" width="auto">
            <div class="table_operation"  slot-scope="scope">
              <el-button type="info"  @click="mod_account(scope.row)">修改</el-button>
              <el-button type="warning"  @click="delBank(scope.row.enterprise_bank_id)">删除</el-button>
            </div>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </views>
</template>

<script>
export default {
  data() {
    return {
      title_list: ["充值引导", "服务商信息"],
      deposit_bank:"",     // 开户银行
      bank_account_name:"",     // 开户姓名
      card_numbers:"",     // 银行卡号
      //  三段综合  企业端  代理商端  服务商端
      tableData:[],
      add_show:false,             //  新增充值账号  展示
      form :{
          bank_account_name:'',
          bank_sn:'',
          bank_name:'',
      }
    };
  },
  computed:{
      save_data(){
          let data = this.form;
          data.is_default = 1;
          return data
      }
  },
  methods: {
    //    修改第一行样式
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background: #FAFAFA ";
      } else {
        return "";
      }
    },
    //     点击单行
    clickRow(row, column, event) {
      console.log(row, column, event);
    },
    //    修改是否换行
    changeStyleRow(width) {
      let _width = width - 290 - 350 - 300 - 50 - 25;
      if (_width > 300) {
        this.marginLeft = 25;
      } else {
        this.marginLeft = 0;
      }
    },
       // 新增充值账号
   add_account(){
       this.form.enterprise_bank_id = '' ;
       this.form.bank_name = '' ;
       this.form.bank_sn = '' ;
      this.add_show = true ;
   },
      // 新增充值账号
  mod_account(row){
      this.form = row ;
      this.add_show = true ;
  },
   close_Model(){
      console.log(11)
       this.add_show = false;
   },
    //获取数据
    getEnterpriseData(){
        let {code , msg, data} = this.$api.sendSync( this.$mapapi.eBankList);
        if(code != 200&&code!=501){
            this.$message.error(msg);
            this.tableData = [];
            return;
        }
        this.tableData = data.list||[];
        console.log('data.enterprise_name',data.enterprise_name);
        this.form.bank_account_name = data.enterprise_name||'';
    },
    getData(){
        if(this.$store.state.terrace==1){
            this.getEnterpriseData();
        }
    },
    // 新增充值账号
    addCommit(){
        let {code , msg, data} = this.$api.sendSync( this.$mapapi.eAddEditBank,this.save_data);
        if(code != 200&&code!=501){
            this.$message.error(msg);
            return;
        }
        this.add_show = false;
        this.getData();
    },
    delBank(bank_id){
        console.log(bank_id,'bank_id');
        this.$confirm('你确定要删除该账户么, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            let {code , msg} = this.$api.sendSync( this.$mapapi.eDelBank,{
                enterprise_bank_id:bank_id
            });
            if(code != 200){
                this.$message.error(msg);
                return;
            }
            this.getData();
            this.$message({
                type: 'success',
                message: '删除成功!'
            });
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消'
            });
        });
    }
  },
  mounted() {
    this.$setRouteTitle();
    this.getData()
  }
};
</script>


<style lang="less" :scope="true" src="@/style/account/account_pay_manage.less" >
</style>